<template>
  <el-row justify="center" style="height: 100%" align="middle">
    <el-col :span="24">
      <el-card id="card">
       <el-row style="height: 80px" justify="center">
         <el-col :span="6">
           <el-image :src="src" style="width: 100%"></el-image>
         </el-col>
         <el-col :span="10">
           <h3 style="margin-top: 29px;font-family: Arial,Microsoft YaHei,黑体,宋体,sans-serif;">&nbsp;&nbsp;在线学习平台</h3>
         </el-col>
       </el-row>
        <el-divider></el-divider>
        <el-tabs v-model="activeName">
          <el-tab-pane label="用户名登录" name="first"><UserLogin></UserLogin></el-tab-pane>
          <el-tab-pane label="教工号登录" name="second"><TeacherLogin></TeacherLogin></el-tab-pane>
          <el-tab-pane label="学号登录" name="third"><StudentLogin></StudentLogin></el-tab-pane>
        </el-tabs>
        <el-divider>
          其他方式登录
        </el-divider>
      </el-card>
    </el-col>
  </el-row>
</template>
<script>
import UserLogin from "@/view/login/UserLogin";
import TeacherLogin from "@/view/login/TeacherLogin";
import StudentLogin from "@/view/login/StudentLogin";
export default {
  name: "LoginPage",
  components: {StudentLogin, TeacherLogin, UserLogin},
  data() {
    return {
      activeName: 'first',
      src:require("../assets/logo_images/logo.png")
    }
  },
}
</script>

<style scoped>
#card{
  width: 400px;
  height: 660px;
  margin: auto;
}
.el-card__body{
  padding-top: 5px;
}
</style>
